.c-sf-add-button {
  display: grid;
  align-items: center;
  justify-content: center;
  width: theme('spacing.5');
  height: theme('spacing.5');
  appearance: none;
  color: $color-teal;
  background-color: $color-white;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  border: 1px solid currentColor;
  border-radius: theme('borderRadius.full');
  margin-inline-start: theme('spacing.[0.5]');

  .icon {
    width: theme('spacing.3');
    height: theme('spacing.3');
    transition: transform $add-transition-duration ease-in-out;
  }

  &--close .icon {
    transform: rotate(45deg);
  }

  &--visible {
    opacity: 1;
    pointer-events: unset;

    @media (hover: hover) {
      opacity: 0;

      .w-panel--nested:is(:hover, :focus-within) & {
        opacity: 1;
      }
    }
  }

  &:hover,
  &:focus-visible {
    color: $color-white;
    background-color: $color-teal;
  }

  &[disabled] {
    opacity: 0.2;
    pointer-events: none;

    @media (forced-colors: active) {
      color: GrayText;
    }
  }
}
